$(document).ready(function() {
   // Get the element where the viewer will be embedded.
   var element = document.getElementById("viewerControlContainer");
   // Create the options object for the viewer
   var options = {
       documentID : "a_valid_document_id",
       imageHandlerUrl: "pcc.ashx",
       // printTemplate : "..."        // include a print template for printing to work
   };
   // Create the viewer control
   var viewerControl = new PCCViewer.ViewerControl(element, options);
   // It's best practice to wait for the "ViewerReady" event before calling the viewer API.
   viewerControl.on("ViewerReady", function() {
       // Display the page count when the estimated and actual page count are available.
       viewerControl.on("PageCountReady", displayPageCount);
       viewerControl.on("EstimatedPageCountReady", displayPageCount);
       function displayPageCount(ev) {
           $("#totalPages").html(ev.pageCount);
       }
       // Display the current page number when the page changes.
       viewerControl.on("PageChanged", function(ev) {
           $("#currentPage").html(ev.pageNumber);
       });
       // It's safe to enable the UI buttons during the ViewerReady event
       $(".viewerButton").prop("disabled", false);
       // ...and then hookup the UI buttons
       $("#nextPage").click(function() {
           viewerControl.changeToNextPage();
       });
       $("#prevPage").click(function() {
           viewerControl.changeToPrevPage();
       });
       $("#zoomOut").click(function() {
           viewerControl.zoomOut(1.25); // Zoom out 1.25x
       });
       $("#zoomIn").click(function() {
           viewerControl.zoomIn(1.25);  // Zoom in 1.25x
       });
   });
});